<template>
  <!-- 产品管理页 -->
  <div>
    <!-- 头部区域 -->
    <div class="header">
      <!-- 添加按钮 -->
      <el-button type="primary" size="mini" @click="addProduct">添加</el-button>
      <!-- 产品名称输入框 -->
      <el-input placeholder="请输入名称" v-model="productName" clearable style="width:180px" size="mini"></el-input>
      <!-- 产品状态下拉框 -->
      <el-select v-model="productStatus" clearable placeholder="请选择状态" size="mini">
        <el-option label="正常" value="正常"></el-option>
        <el-option label="下架" value="下架"></el-option>
      </el-select>
      <!-- 产品栏目下拉框 -->
      <el-select v-model="productCategory" clearable placeholder="请选择栏目" size="mini">
        <el-option v-for="category in categoryData.filter(item => !item.parentId)" :key="category.id" :label="category.name" :value="category.id"></el-option>
        
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" size="mini" @click="queryProduct">查询</el-button>
    </div>
    <!-- 表格内容区 -->
    <div class="table_content">
      <!-- :data整个表格的数据源 -->
      <el-table :data="productData" style="width: 100%" size="mini">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <!-- 产品编号 -->
        <el-table-column prop="id" label="产品编号" align="center"></el-table-column>
        <!-- 名称 -->
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <!-- 图片 -->
        <el-table-column label="图片" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- :preview-src-list预览图片数组 -->
            <el-image style="width: 40px; height: 40px" :src="scope.row.photo" :preview-src-list="[scope.row.photo]">
            </el-image>
          </template>
        </el-table-column>
        <!-- 价格 -->
        <el-table-column prop="price" label="价格" align="center"> </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center"></el-table-column>
        <!-- 所属栏目 -->
        <el-table-column prop="category.name" label="所属栏目" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="editProduct(scope.row)" type="text" size="small" >编辑</el-button>
            <el-button @click="clickOffLine(scope.row.id)" type="text" size="small" v-if="scope.row.status=='正常'"
              style="color:#e65d6e">下架
            </el-button>
            <el-button @click="clickOnLine(scope.row.id)" type="text" size="small" v-else style="color:#3a71a8">上架
            </el-button>
            <el-button type="text" size="small" @click="deleteProduct(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2,4,6,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="50%"
      @close="dialogClose"
      >
      <span>
        <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" >
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="栏目所属" prop="productCategoryId">
            <el-select v-model="form.productCategoryId" value-key="" placeholder="请选择栏目" clearable filterable>
              <el-option v-for="category in categoryData"
                :key="category.id"
                :label="category.name"
                :value="category.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="封面" prop="photo">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload">
              <img v-if="imageUrl" :src="form.photo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model.number="form.price"></el-input>
          </el-form-item>
          <el-form-item label="产品描述" prop="description">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer">
        <el-button @click="dialogClose">取消</el-button>
        <!-- 提交表单后 调用重置表单 -->
        <el-button type="primary" @click="submitForm">{{dialogBtn}}</el-button>
      </span>
    </el-dialog>
    
  </div>

</template>

<script>
  // 引入axios
  import {
    get,
    post
  } from '@/utils/request'
  import {mapActions,mapState} from 'vuex'
  //引入文件上传路径 和 文件预览路径
  import {showFileURL,uploadFileURL} from '@/utils/config'
  export default {
    data() {
      return {
        imageUrl:'',
        showFileURL,
        uploadFileURL,
        // 产品数组 - 表格的数据源的数组
        productData: [],
        // 当前的页码
        currentPage: 1,
        // 每页要展示的条数
        pageSize: 10,
        // 页面展示数据的总条数
        total: 0,
        // 产品名称-输入
        productName: '',
        // 产品状态-下拉选择框
        productStatus: '',
        // 产品栏目-下拉选择框
        productCategory: '',
        queryData:{},
        // 模态框显示
        showDialog:false,
        // 模态框标题
        dialogTitle:'',
        //模态框按钮名称
        dialogBtn: '',
        // 表单规则
        rules:{
          name:[
            {
              required:true,
              message:'请输入产品名称',
              trigger:'blur'
            }
          ],
          productCategoryId:[
            {
              required:true,
              message:'请选择产品栏目',
              trigger:'change'
            }
          ],
          price:[
            {
              required:true,
              message:'请输入价格',
              trigger:'blur'
            },
            {
              type:'number',
              message:'请输入数字',
              trigger:'blur'
            }
          ],
          photo:[
            {
              required:true,
              message:'请选择照片',
              trigger:'change'
            }
          ]
        },
        //表单
        form:{}
      };
    },
    computed: {
      //使用辅助函数
      ...mapState('category',['categoryData'])
    },
    methods: {
      //删除商品
      async deleteProduct(id){
        let res = await get('/product/deleteById',id)
        this.$message.success('删除成功')
        this.getAllProductData()
      },
      // 表单提交
      submitForm(){
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            //发送表单验证请求，提交表单对象，给用户成功提示，刷新页面，调用关闭模态框的方法
            let res = await post('/product/saveOrUpdate',this.form)
            this.$message.success('上传成功')
            this.getAllProductData()
            this.dialogClose()
          } else {
            console.log('上传失败');
            return false;
          }
        });
      },
      //关闭模态框，调用表单重置
      dialogClose(){
        this.$refs['form'].resetFields()
        setTimeout(()=>{
          this.showDialog = false
        },200)
      },
      // 上传成功后，回调的函数
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        //上传成功后 更新imgURL预览图片的路径
        this.form.photo = showFileURL + res.data.id
      },
      //上传之前要做的限制
      beforeUpload(file) {
        const isLt3M = file.size / 1024 / 1024 < 3;

        if (!isLt3M) {
          this.$message.error('上传头像图片大小不能超过 3MB!');
        }
        return isLt3M;
      },
      //编辑功能
      editProduct(row){
        //将当前点击的这一行的对象赋值到表单对象里
        // 浅拷贝 赋值对象的引用对象的内存地址，两个使用的还是一个内存地址
        // 深拷贝 使用不是同一个内存地址
        this.form = {...row}
        this.imageUrl = this.form.photo
        this.showDialog = true
        this.dialogTitle = '编辑产品'
        this.dialogBtn = '提交编辑'
      },
      //打开添加模态框
      addProduct(){
        this.form = {}
        this.imageUrl = ''
        this.dialogTitle = '添加产品'
        this.showDialog = true
        this.dialogBtn = '添加'
      },
      //通过命名空间找到category对应的vuex模块，调用它模块里的方法
      //...mapActions('category模块的文件名'，['对应的方法'])
      ...mapActions('category',['getAllCategoryData']),
      //获取产品栏目
      queryCategoryData(){
        let data = {
          page:1,
          pageSize:100,
        }
        this.getAllCategoryData(data)
      },
      //根据条件模糊查询产品的信息
      queryProduct(){
        let data = {
          name:this.productName,
          status:this.productStatus,
          productCategoryId:this.productCategory,
        }
        //格式化参数，当某个属性没有值得时候，以防影响网络请求的结果
        for(let i in data){
          if(!data[i]){
            delete data[i]
          }
        }
        //将参数 赋值给 queryData
        this.queryData = data
        //强制回到第一页
        this.currentPage = 1
        //调用获取数据的函数
        this.getAllProductData()
      },
      // 产品上架操作
      async clickOnLine(id) {
        // 发送上架请求
        let res = await get('/product/online', {
          id
        });
        // 给用户一个成功或失败提示
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          // 重新刷新页面数据
          this.getAllProductData();
        }
      },
      // 产品下架操作
      async clickOffLine(id) {
        // 发送下架请求
        let res = await get('/product/offline', {
          id
        });
        // 给用户一个成功或失败提示
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          // 重新刷新页面数据
          this.getAllProductData();
        }
      },
      // 编辑产品
      // 分页获取所有产品的数据
      async getAllProductData() {
        // 获取参数
        let data = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        data = {...data,...this.queryData}
        // 通过对应的参数发送网络请求，获取产品组数据
        let res = await get('/product/pageQuery', data);
        // 将data中的产品数组进行赋值
        this.productData = res.data.list;
        this.total = res.data.total;
      },
      // 控制每页条数 每页要展示数据条数
      handleSizeChange(val) {
        this.pageSize = val;
        // 将当前的页数重置到第一页
        this.currentPage = 1;
        this.getAllProductData();
      },
      // 控制当前显示的页数
      handleCurrentChange(val) {
        // 将当前页数与分页插件动态点击控制的页数组相绑定
        this.currentPage = val;
        // 重新调用获取所以UC韩品数据的方法
        this.getAllProductData();
      }
    },
    created() {
      // 自动获取产品数据数组
      this.getAllProductData();
      //获取产品栏目数据数组
      this.queryCategoryData();
    },
    mounted() {},
  };

</script>
<style scoped>
  /* 分页区域样式 */
  .paginetion {
    /* margin-top: 20px;
    position: fixed;
    bottom: 40px;
    right: 10px; */
    margin-top: 10px;
    float: right;
  }

  /* 设置header的样式 */
  .header {
    line-height: 40px;
    margin-bottom: 10px;
  }

</style>
